<template>

  <el-card style="margin: 20px 0">
    <!--  标签页-->
    <!-- 表格操作 -->
    <div style="float: left; margin: 0 0 15px 0;">
      <el-button size="small" type="primary" slot="reference" style="margin-left: 3px"
                 @click="openDialogToInsert()" icon="el-icon-circle-plus-outline">新 增
      </el-button>
      <el-dialog title="新增文档"
                 :visible.sync="dialogInsertVisible"
                 @close="adminToInsert={}">
        <el-form :model="adminToInsert"
                 label-width="100px"
                 :rules="adminToInsertRules"
                 ref="adminToInsert">
          <el-form-item label="名称"  prop="name">
            <el-input v-model="adminToInsert.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话"  prop="phone">
            <el-input v-model="adminToInsert.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio v-model="adminToInsert.gender" label="M">男</el-radio>
            <el-radio v-model="adminToInsert.gender" label="W">女</el-radio>
          </el-form-item>
          <el-form-item label="密码"  prop="password">
            <el-input type="password"  v-model="adminToInsert.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="secondPassword">
            <el-input type="password"  v-model="adminToInsert.secondPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style=" margin-left: 30% ">
            <el-button size="small" @click="dialogInsertVisible = false">取 消</el-button>
            <el-button size="small" type="primary"  @click="insertAdmin('adminToInsert') ">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


    </div>
    <!--      搜索框-->
    <div style="float: right; margin: 0 0 15px 0;">
      <!--      搜索框-->
      <el-input style="width: 200px" size="small" placeholder="请输入管理员名称" prefix-icon="el-icon-search"
                v-model="searchName" clearable>
      </el-input>
      <el-button style="margin-left: 5px" size="small" type="primary" @click="searchByName()"
                 @keyup.enter="enterSearch"><i class="el-icon-search"></i> 搜索
      </el-button>

    </div>
    <!--      表格-->

    <el-table stripe :data="allData"
              tooltip-effect="dark"
              style="width: 100%;
              padding: 0"
              :header-cell-class-name="headerBg"
              border
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              v-loading="loading">
      <el-table-column prop="avatar" label="头像" width="100">
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar" style="height: 50px;width: 50px;vertical-align:middle">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="昵称" width="200">
      </el-table-column>

      <el-table-column prop="phone" label="电话号码">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender === 'M'">
            男
          </el-tag>
          <el-tag v-else>
            女
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isEnable" label="状态" width="180">
        <template slot-scope="scope">
          <el-switch
              v-if="scope.row.role != '超级管理员'"
              style="display: block"
              v-model="scope.row.isEnable"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="禁用"
              inactive-text="正常"
              @change="changeIsEnable(scope.row)">
          </el-switch>
        </template>

      </el-table-column>
    </el-table>

    <!--    分页-->
    <div style="padding: 10px 0; float: right">
      <el-pagination :page-size="10" layout="total, prev, pager, next, jumper" :total=length
                     @current-change="handleCurrentChange" :current-page="currentPage">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }else {
        if (this.adminToInsert.secondPassword !== '') {
          this.$refs.adminToInsert.validateField('secondPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value !== this.adminToInsert.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    var validatePassPhone = (rule, value, callback) => {
      const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!regExp.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }

    };
    return {
      activeName: 'all',
      /*批量处理的数据*/
      multipleSelection: [],
      /*表格第一行*/
      headerBg: "headerBg",
      /*第一次请求所有数据*/
      allData: [],
      /*搜索栏中的昵称*/
      searchName: '',
      // currentPage:1,
      /*显示的数据*/
      currentDate: [],
      /*当前页数*/
      currentPage: 1,
      /*当前的数据暂时*/
      currentDateTemp: [],
      searchPrams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
      length: 0,
      category: [],
      loading: false,
      categoryId: '',

      currentAdmin:{},
      judge:true,
      state:'',
      dialogInsertVisible: false,
      adminToInsert:{},
      adminToInsertRules:{
        name: [
          {required: true, message: '名称不能为空', }
        ],
        phone: [
          { required: true, validator: validatePassPhone,  }
        ],
        password: [
          { required: true, validator: validatePass,  }
        ],
        secondPassword: [
          {required: true,  validator: validatePass2, }
        ],
        gender: [
          {required: true, message: '性别不能为空'},
        ],
      },


    }
  },

  created() {
    this.list();
  },


  methods: {
    list() {
      this.allData = [];
      this.loading = true;
      this.axios.get("/admin/list", {
        params: this.searchPrams
      }).then(({data}) => {
        if (data.state == 20000) {

          data.data.list.forEach((item)=>{
            if(item.isEnable == 0){
              item.isEnable = false;
            }else{
              item.isEnable = true;
            }
            this.allData.push(item);
          })
          console.log("this.allData",this.allData);
          this.length = data.data.totalCount;

        } else {
          this.$message.error(data.message);
        }
        this.loading = false;
      });


    },

    openDialogToInsert(){
      this.dialogInsertVisible = true;

    },

    insertAdmin(){
      console.log("this.adminToInsert",this.adminToInsert);
      this.$refs['adminToInsert'].validate((valid) => {
        if (valid) {
          this.axios.post("/admin/admin-register",this.adminToInsert)
              .then(({data}) => {
                if (data.state == 20000) {
                  this.dialogFormVisible = false;
                  this.$message({
                    message: '新增成功！',
                    type: 'success'
                  });
                  this.dialogInsertVisible=false;
                  this.$refs.adminToInsert.resetFields();
                  this.list();
                } else {
                  this.$message.error(data.message);
                }

              });

        } else {
          this.$message.error("提交失败");
          return false;
        }
      })
    },


    /*当前页变动时候触发的事件*/
    handleCurrentChange(val) {
      /*val就是页号*/
      this.currentPage = val;
      this.searchPrams.pageNum = val;
      this.list();
    },

    changeIsEnable(obj){

      this.currentAdmin.id = obj.id;


     if(obj.isEnable == true){
       this.currentAdmin.isEnable = 1;
      }else{
       this.currentAdmin.isEnable = 0;
      }




      this.axios.post("/admin/update-info",this.currentAdmin).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);

        } else {
          this.$message.error(data.message);
        }
      });



    },

    /*根据文章查询评论列表*/
    searchByName() {

      this.searchName = this.searchName.trim();
      if (this.searchName != '') {
        this.searchPrams.name = this.searchName;
        this.list();
        this.searchPrams.name = '';
        this.searchName = '';
      } else {
        this.list();
      }

    },


    //回车搜索
    enterSearch() {
      document.onkeydown = e => {
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (e.keyCode === 13) {
          //回车后执行搜索方法
          this.searchByName();
        }
      }
    }


  },


}
</script>

<style>
.editor-content-view {
  /*border: 1px solid #ccc;*/
  border-radius: 5px;
  padding: 0;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view pre > code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}

.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view img {
  width: 100%;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;

}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


.headerBg {
  background: #eee !important;
}
</style>
